<table class="table table-striped table-hover table-condensed">
    <thead>
        <tr class="row">
            <th class="col-md-2">Name</th>
            <th class="col-md-6">Areas</th>
            <th class="col-md-2"></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="role in roles" class="row" ng-class="{ warning: result.confirmRemove }">
            <td><span class="form-control-static">{{role.name}}</span></td>
            <td>
                <select data-ui-select2="selectionOptions" multiple ng-model="role.areaItems" data-placeholder="Empty" ng-disabled="role.name == 'Customer'">
                    <option value=""></option>
                    <option ng-repeat="area in areas" value="{{area.value}}">{{area.text}}</option>
                </select>
            </td>
            <td>
                <button type="button" class="btn btn-info" busy-click="updateRole(role)" success="Role updated" ng-hide="role.name == 'Customer'">
                    <i class="glyphicon glyphicon-floppy-disk" title="Edit"></i>
                </button>
            </td>
        </tr>
    </tbody>
</table>